<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js 模板语法</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
</head>
<style>
    .class1{
        background-color: red;
    }
</style>
<body>
<!--1.数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：-->
<div id="app">
    <p>{{ message }}</p>
#    2.Vue.js 都提供了完全的 JavaScript 表达式支持。
    <p>{{ 100 + 100 }}</p>
    <p>{{ ok ? '是':'否'}}</p>
    #3.使用 v-html 指令用于输出 html 代码：
    <div v-html="message2">
    </div>
#    4.HTML 属性中的值应使用 v-bind 指令
#    5.指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
#    6.v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素,参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
#    7.另一个例子是 v-on 指令，它用于监听 DOM 事件：
#    8.修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <div v-bind:class="{'class1':use}">
        v-bind:class 指令
    </div>
    <div v-if="ok" >现在你看到我了</div>
    <a v-on:click="doSomething"></a>
    <form v-on:submit.prevent="onSubmit"></form>
#    在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
#    v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
    <input v-model="message">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            ok:true,
            message:'Hello World!',
            message2:'<a href="https://www.runoob.com">菜鸟教程</a>',
            use:true
        }
    })
</script>
</body>
</html>
